<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>


<div id="app">
    <input type="button" value="开始" @click="begin">
    <input type="button" value="停止" @click="end"><br>
    {{msg}}
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育，别浪~~稳住，我们能赢!!',
            intervalId: null //在data上定义定时器Id
        },
        methods:{

            /*老写法*/

            begin:function () {
               /* var _this = this;
                if( this.intervalId != null){
                    return;
                }

                this.intervalId = setInterval(function () {
                    var str1 = _this.msg.substring(0,1);
                    var str2 = _this.msg.substring(1);
                    _this.msg = str2+str1;
                },500)
*/

                if(this.intervalId != null) return;
                this.intervalId =  setInterval( () => {

                    /*箭头函数*/
                    var start = this.msg.substring(0,1);
                    var end = this.msg.substring(1);

                    //VM 实例会监听自己身上data数据的改变，如果数据发生变化，会自动把最新的数据从data上同步道页面上
                    // 好处  程序员只需要关心数据，不需要考虑如何重新渲染页面
                    this.msg = end+start;
                },400)

            },

            /*es6 新语法
            *
            * 方法名 () 小括号代表参数列表  花括号代表函数体
            * 解析的时候会自动把方法名映射为一个属性名，() { } 在其前面加上function  进行解析
            *
            * */
            end() {
                clearInterval(this.intervalId);
                this.intervalId = null;
            }
        }
    })
</script>
</body>
</html>